<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner> -->
    <panel-group
      :play-volume="PlayVolume"
      :viewers-number="viewersNumber"
      :coupon="coupon"
      :orders-number="ordersNumber"
      @handleSetLineChartData="handleSetLineChartData"
    ></panel-group>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>
  </div>
</template>
<script>
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";

const lineChartData = {
  newVisitis: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    name: "当日播放量"
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
    name: "当日观看人数"
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
    name: "当日领取优惠券数"
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
    name: "当日订单数"
  }
};

export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      PlayVolume: 0,
      viewersNumber: 0,
      coupon: 0,
      ordersNumber: 0
    };
  },
  created() {
    // this.setCache();
    this.getChartData();
    this.getViewersNumberChartData();
    this.getPurchasesChartData();
    this.getOrdersNumberChartData();
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getChartData() {
      const indexDataPath = {
        company: "STQ",
        api: "pc_indexData_getPlayCount",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(indexDataPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 启用失败 ");
        }
      });
    },
    getViewersNumberChartData() {
      const getPlayViewCountPath = {
        company: "STQ",
        api: "pc_indexData_getPlayViewCount",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(getPlayViewCountPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 启用失败 ");
        }
      });
    },
    getPurchasesChartData() {
      const getCouponCountPath = {
        company: "STQ",
        api: "pc_indexData_getCouponCount",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(getCouponCountPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 启用失败 ");
        }
      });
    },
    getOrdersNumberChartData() {
      const getOrderCountPath = {
        company: "STQ",
        api: "pc_indexData_getOrderCount",
        version: "1.0",
        data: {}
      };
      this.socketApi.sendSock(JSON.stringify(getOrderCountPath), res => {
        if (res) {
          this.socketData(res);
        } else {
          this.$message.error(" 启用失败 ");
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_indexData_getPlayCount") {
            const name = [];
            const value = [];
            resj.data.forEach(element => {
              name.push(element.time);
              value.push(element.count);
            });
            this.PlayVolume = resj.count;
            lineChartData.newVisitis.expectedData = value;
            lineChartData.newVisitis.actualData = name;
          } else if (resj.api === "pc_indexData_getPlayViewCount") {
            const playViewName = [];
            const playViewNameValue = [];
            resj.data.forEach(element => {
              playViewName.push(element.time);
              playViewNameValue.push(element.count);
            });
            this.viewersNumber = resj.count;
            lineChartData.messages.expectedData = playViewNameValue;
            lineChartData.messages.actualData = playViewName;
          } else if (resj.api === "pc_indexData_getCouponCount") {
            const couponName = [];
            const couponValue = [];
            resj.data.forEach(element => {
              couponName.push(element.time);
              couponValue.push(element.count);
            });
            this.coupon = resj.count;
            lineChartData.purchases.expectedData = couponValue;
            lineChartData.purchases.actualData = couponName;
          } else if (resj.api === "pc_indexData_getOrderCount") {
            const orderCountName = [];
            const orderCountValue = [];
            resj.data.forEach(element => {
              orderCountName.push(element.time);
              orderCountValue.push(element.count);
            });
            this.ordersNumber = resj.count;
            lineChartData.shoppings.expectedData = orderCountValue;
            lineChartData.shoppings.actualData = orderCountName;
          } else if (resj.api === "pc_home_addUseLog") {
            sessionStorage.setItem("BrowserCache", "exit");
          }
        }
      }
    },
    // 保存浏览器数据
    setCache() {
      if (!sessionStorage.getItem("BrowserCache")) {
        const data = {
          system: navigator.userAgent,
          size: window.screen.availWidth + "*" + window.screen.availHeight,
          ip: returnCitySN["cip"]
        };
        const addUseLogPath = {
          company: "STQ",
          api: "pc_home_addUseLog",
          version: "1.0",
          data: data
        };
        this.socketApi.sendSock(JSON.stringify(addUseLogPath), res => {
          if (res) {
            this.socketData(res);
          }
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
